Estoy tratando de crear una devolución de llamada de setState ya que setState es asíncrono y quiero usar el estado de manera segura después.
function Register(props) { const [errMsg, setErrMsg] = useState(null); const fullNameInputRef = useRef(); const emailInputRef = useRef(); const passwordInputRef = useRef(); function submitHandler(event) { event.preventDefault(); //prevents full page reload const enteredFullName = fullNameInputRef.current.value; const enteredEmail= emailInputRef.current.value; const enteredPassword = passwordInputRef.current.value; axios({ method: 'post', url: 'http://localhost:3000/api/users/register', data: { username: enteredFullName, email: enteredEmail, password: enteredPassword } }).then( (res) => { if (res.data.success == false) { setErrMsg(`${res.data.message}`, () => { /* setState Callback */ console.log(errMsg); }); } else { console.log(res)} }).catch( (err) => { console.log(err) setErrMsg("An error has occured. Please try again later") }); }Pero console.log dentro de la devolución de llamada no funciona. ( console.log(errMsg); ) Recibo el siguiente error:
Advertencia: las actualizaciones de estado de useState() y useReducer() Hooks no admiten el segundo argumento de devolución de llamada. Para ejecutar un efecto secundario después de renderizar, declárelo en el cuerpo del componente con useEffect().
¿Qué me estoy perdiendo?
Al igual que los estados de error, setState of hooks no admite el segundo argumento como en los componentes de clase:
// BAD, WRONG API setErrMsg(`${res.data.message}`, () => console.log(errMsg)); En su lugar, agregue un useEffect :
// GOOD setErrMsg(`${res.data.message}`); useEffect(() => { console.log(errMsg); }, [errMsg]Código completo:
function Register(props) { const [errMsg, setErrMsg] = useState(null); ... useEffect(() => { console.log(errMsg); }, [errMsg] function submitHandler(event) { ... axios({ ... }).then((res) => { if (res.data.success == false) { setErrMsg(`${res.data.message}`); } else { console.log(res)} }).catch( (err) => { console.log(err) setErrMsg("An error has occured. Please try again later") }); } return <>...</> }